<template>
  <div>
    <div class="mb8 flex justify-end">
      <el-button type="primary" size="mini" @click="onToReportForm()">报表审批进度</el-button>
    </div>
    <el-descriptions border title="" :column="1" size="medium" labelClassName="descriptions-label"
      contentClassName="descriptions-content">
      <el-descriptions-item label="站点名称：" span="1">{{ topInfo.zdName }}</el-descriptions-item>
      <el-descriptions-item label="容量(KW)：" span="1">{{ topInfo.capacity }}</el-descriptions-item>
      <el-descriptions-item label="地点：" span="1">{{ topInfo.address }}</el-descriptions-item>
      <el-descriptions-item label="建设单位：" span="1">{{ topInfo.jiansdwName }}</el-descriptions-item>
      <el-descriptions-item label="施工单位：" span="1">{{ topInfo.sgdwName }}</el-descriptions-item>
      <el-descriptions-item label="监理单位：" span="1">{{ topInfo.jldwName }}</el-descriptions-item>
      <el-descriptions-item label="工序：" span="1">
        {{ form.name }}
      </el-descriptions-item>
      <el-descriptions-item label="期数：" span="1">
        {{ form.qs ? '第' + form.qs + '期' : '' }}
      </el-descriptions-item>
      <el-descriptions-item label="施工时间：" span="1">
        {{ parseTime(form.constructionTime, '{y}-{m}-{d}') }}
      </el-descriptions-item>
      <el-descriptions-item label="报验时间：" span="1">
        {{ parseTime(form.inspectTime, '{y}-{m}-{d}') }}
      </el-descriptions-item>
      <el-descriptions-item label="资料列表：" span="1">
        <el-table class="cd-mb8" border stripe v-loading="loading" :data="form.infoList">
          <el-table-column label="序号" align="center" width="50px" type="index" />
          <el-table-column label="资料名称" align="center" property="name" min-width="140" show-overflow-tooltip />
          <el-table-column label="文件" header-align="center" property="fileName" min-width="220" show-overflow-tooltip>
            <template slot-scope="scope">
              <div class="file-border pointer theme-color" v-for="(item, index) in scope.row.sysOssVos" :key="index"
                @click="previewFile(item)">
                <span class="el-icon-document cd-mr4"></span>
                <span class="pointer theme-color">{{ item.originalName }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="上传时间" align="center" property="updateTime" width="120" show-overflow-tooltip>
            <template slot-scope="scope">
              {{ parseTime(scope.row.updateTime, '{y}-{m}-{d}') }}
            </template>
          </el-table-column>
          <el-table-column label="上传人" align="center" property="updateBy" width="120" show-overflow-tooltip />
        </el-table>
      </el-descriptions-item>
      <el-descriptions-item label="附件：" span="1">
        <fileUpload v-model="form.fileNo" :oldList="form.fileNoOld" :fileType="['doc', 'docx', 'xlsx', 'xls'
          , 'pdf', 'png', 'jpg', 'jpeg']" :disabled="true" />
      </el-descriptions-item>
      <el-descriptions-item label="备注：" span="1">
        {{ form.remark }}
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>
<script>
import { getBsProcessInspection } from "@/api/pl/bsProcessInspection";
import { queryBdInfoByZdId } from "@/api/base/bsBd";

export default {
  name: 'gxby-add-or-update',
  components: {
  },
  props: {
    id: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      loading: false,
      form: {},
      topInfo: {}
    };
  },
  watch: {
    id: {
      deep: true,
      immediate: true,
      handler (val) {
        this.init(val);
      }
    }
  },
  created () {
  },
  mounted () {
  },
  methods: {
    init (id) {
      if (!id) {
        return;
      }
      this.reset();
      this.open = true;
      this.form.id = id;
      this.getInfo();
    },
    getInfo () {
      this.loading = true;
      getBsProcessInspection(this.form.id).then(response => {
        this.loading = false;
        this.form = response.data;
        if (this.form.fileNo) {
          this.form.fileNoOld = this.form.fileNo.split(',');
        }
        if (this.form.infoList && this.form.infoList.length > 0) {
          this.form.infoList.forEach(item => {
            if (item.fileNo) {
              item.fileNoOld = this.form.fileNo.split(',');
            }
          });
        }
        this.getBdInfoByZdId();
      });
    },
    // 根据站点获取标段详情
    getBdInfoByZdId () {
      queryBdInfoByZdId(this.form.zdId).then(res => {
        this.topInfo = res.data;
      });
    },
    // 表单重置
    reset () {
      this.form = {
        approveStatus: undefined,
        enabled: undefined,
        fbfxId: undefined,
        fileType: undefined,
        id: undefined,
        infoList: [],
        constructionTime: undefined,
        inspectTime: undefined,
        name: undefined,
        processId: undefined,
        qs: undefined,
        qsId: undefined,
        remark: undefined,
        sort: undefined,
        zdId: undefined,
        fileNo: undefined,
        fileNos: [],
        fileNoOld: [],
      };
      this.dataList = [];
      this.selectedData = [];
    },
    // 下载
    async download (row) {
      this.$download.oss(row.ossId);
    },
    // 跳转 审批进度
    onToReportForm () {
      if (!this.form.qsId) {
        this.$message.warning("请选择期数！");
        return;
      };
      this.$router.push({
        path: '/cm/reportForm',
        query: {
          projectId: this.form.projectId,// "1855777111119319041",
          bdId: this.form.bdId,//'1856236267613716481',
          qsId: this.form.qsId
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.file-border {
  font-size: 14px;
  width: 100%;
  overflow: hidden;
  /* 隐藏超出的内容 */
  white-space: nowrap;
  /* 不换行 */
  text-overflow: ellipsis;
}

::v-deep {
  .descriptions-label {
    width: 120px;
    text-align: right !important;
    padding: 5px 0 !important;
  }

  .descriptions-content {
    // padding: 5px !important;

    .el-form-item {
      margin-bottom: 0px !important;
    }
  }
}
</style>
